<!-- 传入的参数: 
				[{
					//input 类型
					title: input 左边的 标题,
					placeholder: input placeholder 的内容,	// 默认为‘请输入’ + this.title
					ignore: 忽略， 不判断是否为空,	// 默认为必填
					nullErr: 为空时， showToast提示,		// 默认为showToast(this.title + '不能为空');
					inputType: input 的类型 (默认text)
					
					
				}, {
					//图片类型
					pics: 是否为图片类型,	// 无此属性， 则默认为input
					title: 图片的标题,
					picsArray:  [{	// 图片数组 (有几项决定可上传几张图片)
						title: 该项需上传图片的标题
						ignore:（忽略非必须）可以为空， 不判断是否为空,默认为必填，必填则在title前面有 * 标识，
					}],
					ignore: 忽略， 不判断是否为空,	// 默认为必填
					nullErr: 为空时， showToast提示,		// 默认为showToast(this.title + '不能为空');
				}, {
					phone: 手机号 input 标识,  // 获取验证码时判断此属性
				}]
 -->
<template>
  <view class="width100">
    <view
      :class="item.pics?'flex_column':'flex_row'"
      class="width100 padding2vh3vw box-sizing-border-box"
      v-for="(item, index) in inputs"
      :key="index"
     >
    
      <view
        class="width100 padding1vh3vw box-sizing-border-box"
        v-if="item.pics"
       >
        <view class="flex_row width100">
          <view
            class="flex_column_c_c padding1vh"
            v-for="(picsItem, picsIndex) in item.picsArray"
            :key="picsIndex"
           >
            <view
              class="flex_row_c_c pic_view"
              @tap="!picsObj[onLoadData + index + onLoadData + picsIndex]?chooseImg(index, picsIndex): ''"
             >
              <image
                :src="picsObj[onLoadData + index + onLoadData + picsIndex]"
                mode="aspectFill"
                class="picsItem_pic"
                v-if="picsObj[onLoadData + index + onLoadData + picsIndex]"
              ></image>
              <view
                class="fontSize2Point1vh fontColorADADAD"
                v-else
              >+</view>
              <view
                class="clearView"
                v-if="picsObj[onLoadData + index + onLoadData + picsIndex]"
                @tap.stop.prevent="clearPic(index, picsIndex)"
              >
                <uni-icon
                  type="clear"
                  color="#f5105c"
                  size="3"
                />
              </view>
            </view>
            <view
              class="flex_row_c_c marginTop1vh picsItem_title"
              v-if="picsItem.title"
            >
              <view
                class="fontSize1Point8vh fontColorF1505C"
                v-if="!picsItem.ignore"
              >*</view>{{picsItem.title}}
            </view>
          </view>
        </view>
      </view>
      <view
        class="input_item"
        v-else
      >
        <input
          :type="item.inputType||'text'"
          value=""
          @input="inputs_change($event, index)"
          :placeholder="item.placeholder||'请输入' + item.title"
          class="width100 borderBottom1pxf2f2f2"
          :style="{'fontSize': input_fontSize + 'vh'}"
        />
      </view>
    </view>
    <button
      type="primary"
      class="margin2vh3vw"
      @tap="activeFc"
    >{{activeName}}</button>
  </view>
</template>

<script>
import _app from "./app.js";
// import uniIcon from "./uni-icon.vue";
export default {
  props: {
    inputs: {
      // 需循环遍历的input
      type: Array,
      default: []
    },
    fontSize: {
      // title 的font-size
      type: Number,
      default: 2.1
    },
    fontColor: {
      // color
      type: String,
      default: "#666666"
    },
    input_fontSize: {
      // inputs的font-size
      type: Number,
      default: 2.1
    },
    ruleName: {
      // 规则的名称
      type: String,
      default: ""
    },
    activeName: {
      // 发送按钮的名字
      type: String,
      default: "发送"
    },
    ifCode: {
      // 是否需要验证码
      type: Boolean,
      default: false
    },
    ifRule: {
      // 是否需要规则
      type: Boolean,
      default: false
    },
    onLoadData: {
      // 数据变量名（+index）
      type: String,
      default: "data_"
    }
  },
  data() {
    return {
      code: "", // 本地生成的验证码
      userCode: "", // 用户输入的验证码
      Igree: false, // 用户是否同意规则或协议
      codeCount: 90, // 获取验证码后倒计时
      startCode: false, // 是否获取验证码
      picsObj: {}
    };
  },
  methods: {
    IgreeFc(e) {
      // 用户是否同意规则
      this.Igree = e.detail.value;
    },
    chaildOpenEvent() {
      // 打开规则页面的父级方法
      this.$emit("chaildOpenEvent");
    },
    inputs_change(e, index) {
      // 用户输入时，根据index赋值
      let _this = this;
      _this[_this.onLoadData + index] = e.detail.value;
    },
    getCode() {
      // 判断是否正确输入手机号后发送验证码并倒计时
      let _this = this;
      let phone = "";
      let d = _this.inputs;
      for (let i = 0; i < d.length; i++) {
        // 循环遍历数据找到手机号的那项
        if (d[i].phone) {
          phone = _this[_this.onLoadData + i];
        }
      }
      if (phone && phone != null && !isNaN(phone) && phone.length == 11)
        _this.sendSMS(phone);
      // 调用发送验证码的方法
      else {
        _app.showToast("请正确输入11位手机号");
        return;
      }

      _this.setInterValFunc = setInterval(() => {
        if (_this.codeCount > 0) --_this.codeCount;
        else {
          _this.startCode = false;
          clearInterval(_this.setInterValFunc);
          _this.code = "";
          _this.codeCount = 90;
        }
      }, 1000);
      _this.startCode = true;
    },
    sendSMS(phone) {
      // 生成验证码并发送的方法， 可根据需求在父组件导入(可变通性高)或直接写在此处
      //生成验证码
      this.code = "生成的验证码";
      //发送验证码
    },
    activeFc() {
      // 主功能按钮方法
      let _this = this;
      let d = _this.inputs;
      let inputsDataObj = {};
      // 先判断 inputs 的值是否为空, 后判断该值是否忽略
      for (let i = 0; i < d.length; i++) {
        if (d[i].pics) {
          for (let j = 0; j < d[i].picsArray.length; j++) {
            let pic =
              _this.picsObj[_this.onLoadData + i + _this.onLoadData + j];
            if (pic) {
              if (!inputsDataObj[_this.onLoadData + i])
                inputsDataObj[_this.onLoadData + i] = [];
              inputsDataObj[_this.onLoadData + i].push(pic);
            } else {
              if (d[i].picsArray[j].ignore) {
                if (!inputsDataObj[_this.onLoadData + i])
                  inputsDataObj[_this.onLoadData + i] = [];
                inputsDataObj[_this.onLoadData + i].push("");
              } else {
                _app.showToast(
                  d[i].picsArray[j].nullErr ||
                    d[i].picsArray[j].title + "不能为空"
                );
                return;
              }
            }
          }
        } else {
          if (!_this[_this.onLoadData + i]) {
            if (!d[i].ignore) {
              inputsDataObj[_this.onLoadData + i] = "";
            } else {
              _app.showToast(d[i].nullErr || d[i].title + "不能为空");
              return;
            }
          } else {
            inputsDataObj[_this.onLoadData + i] = _this[_this.onLoadData + i];
          }
        }
      }
      // 判断是否需要同意规则，是否填写验证码并判断是否正确
      if (_this.ifRule)
        if (!_this.Igree) {
          _app.showToast("请先阅读并同意" + _this.ruleName);
          return;
        }
      if (_this.ifCode)
        if (!_this.code) {
          _app.showToast("请先获取验证码");
          return;
        } else if (!_this.userCode) {
          _app.showToast("填写验证码");
          return;
        } else if (_this.userCode !== _this.code) {
          _app.showToast("验证码不正确");
          _this.userCode = "";
          _this.code = "";
          return;
        }
      // 如果用了图片类型， 则上传并返回数据
      let pic_promise = [];
      for (let i = 0; i < d.length; i++) {
        if (d[i].pics) {
          for (let j = 0; j < d[i].picsArray.length; j++) {
            if (inputsDataObj[_this.onLoadData + i][j]) {
              pic_promise.push(
                new Promise(function(reslove, reject) {
                  // push Promise 上传图片到服务器并返回图片在服务器的地址并拼接的方法
                  _app.UpLoadFile(
                    _app.interface.upLoadImg,
                    {},
                    "name",
                    inputsDataObj[_this.onLoadData + i][j],
                    function(res) {
                      reslove({
                        index1: i,
                        index2: j,
                        data: res.data
                      }); // index2 基本无用， 若无需求可删
                    }
                  );
                })
              );
            } else {
              pic_promise.push(
                new Promise(function(reslove, reject) {
                  // 若用户未填此数据并忽略此数据时传空以记录此次数据
                  reslove({
                    index1: i,
                    index2: j,
                    data: ""
                  }); // index2 基本无用， 若无需求可删
                })
              );
            }
          }
        }
      }
      Promise.all(pic_promise).then(res => {
        // Promise返回一个图片的数组, 根据res.index1 给 inputsDataObj[_this.onLoadData + res[i].index1] 赋值
        if (res.length > 0)
          for (let i = 0; i < res.length; i++) {
            // 注： 此处根据自己的需求拼接数据   (在下返回数据后的拼接是以 ‘|’ 分隔)
            /* if(typeof(inputsDataObj[_this.onLoadData + res[i].index1]) != 'string')
								inputsDataObj[_this.onLoadData + res[i].index1] = res[i].data || '|'; // res[i].data有可能为空
							else
								inputsDataObj[_this.onLoadData + res[i].index1] += res[i].data?'|' + res[i].data : '|'; */
          }
        _this.$emit("activeFc", inputsDataObj); // 把用户输入数据封装成对象输出给父级
        _this.inputs_reSet(); //提交后重置验证码
      });
    },
    inputs_reSet() {
      //提交后重置验证码
      this.code = "";
      this.userCode = "";
      this.Igree = false;
    },
    chooseImg(index, picsIndex) {
      //选择图片
      let _this = this;
      uni.chooseImage({
        success: function(res) {
          _this.$set(
            _this.picsObj,
            _this.onLoadData + index + _this.onLoadData + picsIndex,
            res.tempFilePaths[0]
          );
        }
      });
    },
    clearPic(index, picsIndex) {
      //清除图片
      this.picsObj[this.onLoadData + index + this.onLoadData + picsIndex] = "";
    }
  },
  components: {
    uniIcon
  }
};
</script>

<style scoped>
.input_title {
  width: 25%;
  margin-right: 5%;
}

.input_item {
  width: 75%;
}

.pic_view {
  position: relative;
  height: 7vh;
  width: 20vw;
  border: 1px solid #f2f2f2;
}

.picsItem_pic {
  height: 7vh;
  width: 20vw;
}

/* width值与 .pic_view 相同*/
.picsItem_title {
  width: 20vw;
  font-size: 1.5vh;
  color: #adadad;
}

.clearView {
  position: absolute;
  top: -2vh;
  right: -1.5vh;
  padding: 0.1vh;
}

/* 公共样式(可剪切至App.vue) */
.width100 {
  width: 100%;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex_column_c_c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex_row {
  display: flex;
  flex-direction: row;
}

.flex_row_none_c {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex_row_e_c {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.flex_row_c_c {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex_row_between_c {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.padding2vh3vw {
  padding: 2vh 3vw;
}

.box-sizing-border-box {
  box-sizing: border-box;
}

.fontSize1Point8vh {
  font-size: 1.8vh;
}

.fontSize2Point1vh {
  font-size: 2.1vh;
}

.fontColorF1505C {
  color: #f1505c;
}

.fontColorADADAD {
  color: #adadad;
}

.fontColor666666 {
  color: #666666;
}

.fontColor007AFF {
  color: #007aff;
}

.padding1vh3vw {
  padding: 1vh 3vw;
}

.padding1vh {
  padding: 1vh;
}

.marginTop1vh {
  margin-top: 1vh;
}

.borderBottom1pxf2f2f2 {
  border-bottom: 1px solid #f2f2f2;
}

.margin2vh3vw {
  margin: 2vh 3vw;
}
</style>
